document.addEventListener('click', event => {


    if (event.target.classList.contains('hide-sidebar') ||
        event.target.closest('.hide-sidebar')) {
        hideSidebar(event);
    } else if (event.target.closest('.font-size')) {
        changeFontSize(event);
    } else if (event.target.closest('[data-open-page]') ||
        event.target.closest('[data-next-page]') ||
        event.target.closest('[data-previous-page]')) {
        openPage(event);
    };
})

document.body.addEventListener('input', (event) => {
    if (event.target.querySelector('[data-page-number]')) {
        const totalPageLength = document.querySelector('[data-total-page]').textContent.length;

        if (event.target.value.length > totalPageLength) {
            event.target.value = event.target.value.substring(0, event.target.value.length - 1);
        }

        event.target.value = event.target.value.replace(/\D/gi, '');
    }
})

if (document.forms.bookmark) {
    document.forms.bookmark.onsubmit = (event) => {

        event.preventDefault();

        if (event.target.closest('[name="bookmark"]')){
            addRemoveBookmark(event)
        }
    }
}

if (document.querySelector('.text')) {
    convertText();
    highlightQuotes();
    setBackgroundImage();
}



function setBackgroundImage() {
    // Устанавливаем фоновое изображени

    const backgroundImage = document.querySelector('.background-image').value;
    const doneBackgroundImage = '/media/' + backgroundImage;
    
    if (backgroundImage) {
        changeAppearanceForBackgroundImage()
    }


    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function changeAppearanceForBackgroundImage() {
        document.body.style.background = `url(${doneBackgroundImage})`;
        document.body.style.backgroundSize = '100% 100%';
        document.querySelector('.navigation-menu').classList.remove('shadow');
        document.querySelector('.content').classList.remove('shadow');
    }
}

function convertText() {
    // Преобразуем текст в нужный вид, добавляя каждое слово в <span>

    let result = [];
    const $text = document.querySelector('.text');
    const text = $text.textContent.split(' ')

    for (let word of text) {
        if (word) {
            result.push(`<span>${word}</span>`);
        }
    }

    $text.innerHTML = `<p data-book-page style="white-space: pre;">${result.join(' ')}</p>`;
}

function highlightQuotes() {
    const initial_url = document.location.href.replace(/\?.*/ig, '');
    const url = initial_url + `quote/`;
    base.sendAjaxRequest(url, 'GET')
        .then(result => {
            colorText(result)
        })


    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ


    function colorText(data) {
        const quotes = data.quotes;
        let text = [document.querySelector('.text>p').textContent.replace('  ', ' ')]

        for (let quote of Object.values(quotes)) {
            let modifiedText = text.at(-1).replace(quote.content, `<span style="background: #${quote.color};">${quote.content}</span>`)
            text.push(modifiedText)
        }
        document.querySelector('.text>p').innerHTML = text.at(-1);
    }
}



function addRemoveBookmark(event) {
    // Добавляем/удаляем закладку

    const token = event.target.querySelector('input[name="csrfmiddlewaretoken"]').value;
    const initial_url = document.location.href.replace(/\?.*/ig, '');

    if (event.target.querySelector('button[data-bookmark="false"]')) {
        addBookmark(token, initial_url);
    } else if (event.target.querySelector('button[data-bookmark="true"]')) {
        removeBookmark(token, initial_url)
    }



    // НИЖЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    function removeBookmark(token, initial_url) {
        const url = initial_url + 'remove/' + '0' + '/';
        base.sendAjaxRequest(url, 'POST', {'token': token})
            .then(() => {
                document.querySelector('.bookmark>i').classList.remove('color-active-bookmark')
                document.querySelector('.bookmark>i').classList.add('color-inactive-bookmark')
                document.querySelector('button[data-bookmark="true"]').dataset.bookmark = 'false'
            })
    }

    function addBookmark(token, initial_url) {
        const currentPageNumber = base.getCurrentPageNumber();
        const url = initial_url + 'add/' + currentPageNumber + '/';
        base.sendAjaxRequest(url, 'POST', {'token': token})
            .then(() => {
                document.querySelector('.bookmark>i').classList.remove('color-inactive-bookmark')
                document.querySelector('.bookmark>i').classList.add('color-active-bookmark')
                document.querySelector('button[data-bookmark="false"]').dataset.bookmark = 'true'
            })

    }
}

function openPage(event) {
    // Открываем страницу

    function scrollPage() {
        // Прокручиваем страницу вверх

        window.scrollTo(0, 77)
    }

    function displayBookmark(context) {
        // Отображаем закладку
        
        const currentPageNumber = base.getCurrentPageNumber();
        if (context.bookmark == +currentPageNumber) {
            document.querySelector('[data-bookmark]>i').classList.add('color-active-bookmark');
        } else {
            document.querySelector('[data-bookmark]>i').classList.remove('color-active-bookmark');
        }

    }

    function changePageContent(context) {
        // Меняем содержимое страницы

        document.querySelector('.text').innerHTML = context.text;
        document.querySelector('.current-page').innerHTML = context.page_number;
        document.querySelector('.previous-page').innerHTML = context.previous_page;
        document.querySelector('.next-page').innerHTML = context.next_page;

        convertText();
        base.colorPageNotes(context.quotes);
        scrollPage();
        displayBookmark(context);
    }

    function openPageByTyping(event) {
        // Открываем страницу по указанному номеру

        const url = document.location.href.replace(/\?.*/ig, '') + `?update=true&page=${pageNumber.value}`
        base.sendAjaxRequest(url, 'GET')
            .then(result => {
                changePageContent(result);
                pageNumber.value = '';
            })
    }

    function openPagePreviousNext(event) {
        // Открываем предыдущую/следующую страницу

        const currentPage = +document.querySelector('.current-page').textContent;

        if (event.target.closest('[data-previous-page]')) {
            const previousPage = currentPage - 1;
            const url = document.location.href.replace(/\?.*/ig, '') + `?update=true&page=${previousPage}`;
            console.log(url)
            base.sendAjaxRequest(url, 'GET')
                .then(result => {
                    changePageContent(result)
                })
        } else if (event.target.closest('[data-next-page')) {
            const nextPage = currentPage + 1;
            const url = document.location.href.replace(/\?.*/ig, '') + `?update=true&page=${nextPage}`;
            console.log(url)
            base.sendAjaxRequest(url, 'GET')
                .then(result => {
                    changePageContent(result)
                })
        }
    }

    function updateLastPage() {
        const currentPage = +base.getCurrentPageNumber() + 1;
        const url = document.location.href.replace(/\?.*/ig, '') + currentPage + '/';
        base.sendAjaxRequest(url, 'GET')
    }

    // ВЫШЕ ОПРЕДЕЛЕНИЕ ФУНКЦИЙ

    event.preventDefault()
    const pageNumber = document.querySelector('[data-page-number]');

    if (pageNumber.value) {
        openPageByTyping(event)
    } else {
        openPagePreviousNext(event)
    }
    updateLastPage()

}


function changeFontSize(event) {
    // Меняем размер шрифта

    const text = document.querySelector('.text');
    const currentFontSizePx = parseInt(getComputedStyle(text).fontSize);

    if (event.target.closest('.fa-plus') && currentFontSizePx < 22){
        console.log(3)
        text.style.fontSize = currentFontSizePx + 1 + 'px';
    }
    else if (event.target.closest('.fa-minus') && currentFontSizePx > 16) {
        console.log(2)
        text.style.fontSize = currentFontSizePx - .5 + 'px';
    }
    else if (event.target.closest('.fa-arrow-rotate-left')) {
        text.style.fontSize = '19.2px';
    }
}

function hideSidebar(event) {
    // Скрываем боковое меню
    
    const status = document.querySelector('.hide-sidebar')
    
    if (status.dataset.statusSidebar == 'false') {
        console.log(1)
        document.querySelector('.fa-xmark').style.display = 'none';
        document.querySelector('.fa-check').style.margin = '0';
        document.querySelector('.fa-check').style.display = 'block';
        document.querySelector('.content').style.animation = 'none';
        document.querySelector('.navigation-menu').style.animation = 'hide-menu-to-left 200ms ease-out 1 forwards';
        setTimeout(() => {
            document.querySelector('.navigation-menu').style.display = 'none';
        }, 200)

        status.dataset.statusSidebar = 'true';
        return
    }

    if (status.dataset.statusSidebar == 'true') {
        console.log(0)
        document.querySelector('.fa-xmark').style.display = 'block';
        document.querySelector('.fa-check').style.display = 'none';
        document.querySelector('.content').style.animation = 'move-content-to-right 200ms ease-out 1';
        document.querySelector('.navigation-menu').style.animation = 'none'
        setTimeout(() => {
            document.querySelector('.navigation-menu').style.display = 'block'
        }, 200)
        status.dataset.statusSidebar = 'false';
        return
    }

}